<template>
  <div style="margin: 0 20px">
    <div class="search">
      <div class="left">
        <div>
          <span>消防机构列表</span>
        </div>
      </div>
      <div class="right">
        <el-input v-model="search" placeholder="请输入机构名称搜索" style="width: 200px">
          <template #suffix>
            <el-icon class="el-input__icon"><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <Table :table-info="tableInfo" :table-data="tableData">
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <span class="operation" @click="handleSelect(scope.row)">查看</span>
        </template>
      </el-table-column>
    </Table>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="total"
      :page-sizes="[10, 15, 30, 50, 100]"
      style="position: absolute; bottom: 20px; right: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <QueryMechanismInfo :mechanism-info="mechanismInfo" />
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useUserStore } from '@/store'
import { cgQueryJgList } from '@/service'
import Table from '@/components/table.vue'
import QueryMechanismInfo from './components/queryMechanismInfo.vue'

const userStore = useUserStore()

/** 查看机构信息 */
const mechanismInfo = ref({})
const handleSelect = (row: any) => {
  mechanismInfo.value = row
  userStore.queryMechanismInfoShow = true
}

// 搜索框
const search = ref('')
/** 监听搜索框获取过滤后表格数据 */
watch(
  () => search.value,
  (newVal, oldVal) => {
    pageInfo.value.ssc = newVal
    getVehicleInfo()
  }
)
// 表格数据
const tableData = ref([])
const total = ref()
const tableInfo = ref({
  columns: [
    { props: 'jgmc', label: '机构名称', width: 400 },
    { props: 'jgxz', label: '机构性质' },
    { props: 'lldj', label: '力量等级' },
    { props: 'jgzt', label: '机构状态' },
    { props: 'txzbsDh', label: '值班电话' },
  ],
  tableHeight: 640,
})
const pageInfo = ref({ pageNo: 1, pageSize: 10, ssc: '' })
/** 获取视频信息 */
const getVehicleInfo = () => {
  cgQueryJgList(pageInfo.value).then((res: any) => {
    tableData.value = res.records
    total.value = res.total
  })
}
getVehicleInfo()

/** 分页操作 */
//切换页码
const handleCurrentChange = (val: any) => {
  pageInfo.value.pageNo = val
  getVehicleInfo()
}
//选择条数
const handleSizeChange = (val: any) => {
  pageInfo.value.pageSize = val
  getVehicleInfo()
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  .left {
    display: flex;
    align-items: center;
    flex: 1;
    span:nth-child(2) {
      // font-size: 14px;
      color: #606266;
    }
  }
  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 300px;
    .add {
      width: 70px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      background-color: #209dbe;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}

.delete {
  color: red;
  cursor: pointer;
}
</style>
